<template>
  <div class="inputinvoice-detail">
    <van-field name="radio" label="发票类型">
      <template #input>
        <van-radio-group v-model="invoiceType" direction="horizontal" @change="changeInvoiceType">
          <van-radio name="普票" checked-color="#FE9200">普票</van-radio>
          <van-radio name="专票" checked-color="#FE9200">专票</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field label="开票类目" label-width="90px" readonly clickable v-model="invoiceCategory" placeholder="请选择开票类目" @click="showPicker = true"></van-field>
    <van-field label="公司全称" label-width="90px" v-model="invoiceCompany" placeholder="请输入公司全称" type="text">
      <template #button>
        <van-button size="small" color="#f09637" @click="getTaxNo">匹配税号</van-button>
      </template>
    </van-field>
    <van-field label="纳税人识别号" label-width="90px" v-model="taxpayerIdNum" placeholder="请输入纳税人识别号" type="text"></van-field>
    <van-field label="开票金额" label-width="90px" v-model="invoiceNumber" placeholder="请输入发票金额" type="number"></van-field>
    <van-field label="收件人信息" label-width="90px" v-model="receiverInfo" placeholder="请输入邮寄发票的收件人姓名和电话" type="text"></van-field>
    <van-field label="收件地址" label-width="90px" v-model="address" placeholder="请输入收件地址"></van-field>
    <van-field label="费率" label-width="90px" v-model="rate" placeholder="税点加服务费"></van-field>
    <template v-if="invoiceType === '普票'">
      <div class="upload">
        <span class="desc">身份证正面</span>
        <van-uploader
          :after-read="
            (file, detail) => {
              afterRead(file, detail, 'idCardFront');
            }
          "
        >
          <img v-if="idCardFront" :src="idCardFront" alt="" />
          <img v-else src="@assets/images/inputInvoiceApply_icon01.png" alt="" />
        </van-uploader>
      </div>
      <div class="upload">
        <span class="desc">身份证反面</span>
        <van-uploader
          :after-read="
            (file, detail) => {
              afterRead(file, detail, 'idCardBack');
            }
          "
        >
          <img v-if="idCardBack" :src="idCardBack" alt="" />
          <img v-else src="@assets/images/inputInvoiceApply_icon02.png" alt="" />
        </van-uploader>
      </div>
    </template>
    <template v-else>
      <van-field label="所属行业" @click="showIndustryPicker = true" readonly clickable label-width="90px" v-model="industry" placeholder="请选择所属行业"></van-field>
      <van-field label="发放佣金用途" label-width="90px" v-model="commissionUsage" placeholder="例如结算个人服务费、咨询费、推广费等"></van-field>
      <van-field label="发放佣金周期" label-width="90px" v-model="commissionTerm" placeholder="例如日结/周结/月结"></van-field>
      <van-field label="开户银行" label-width="90px" v-model="openBank" placeholder="请输入开户银行"></van-field>
      <van-field label="银行账号" label-width="90px" v-model="bankAccount" placeholder="请输入银行账号"></van-field>
      <van-field label="操作人手机号" label-width="90px" type="tel" v-model="operatorPhone" placeholder="请输入操作人手机号" maxlength="11"></van-field>
      <p class="tips">以上信息只作为开设灵活用工使用，将会有税筹经理与您联系，请耐心等待。</p>
    </template>
    <van-button color="#FE9200" block class="submit-btn" @click="submit">提交</van-button>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="invoiceCategoryList" value-key="name" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
    <van-popup v-model="showIndustryPicker" round position="bottom">
      <van-picker show-toolbar :columns="industryList" value-key="name" @cancel="showIndustryPicker = false" @confirm="onConfirmIndustry" />
    </van-popup>
  </div>
</template>

<script>
import { Cell, Picker, Popup, Button, RadioGroup, Radio, Field, Toast, Uploader, Dialog } from 'vant';
import { order_saveOrder, invoiceTitle_getCompanyList, invoiceCategory_getInvoiceCategoryList, sysConfig_getSysConfigList } from '@api/service';
export default {
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Field.name]: Field,
    [Button.name]: Button,
    [Cell.name]: Cell
  },
  data() {
    return {
      showPicker: false,
      showIndustryPicker: false,
      invoiceCategoryObj: {}, //开票类目列表
      industryList: [],
      invoiceType: '普票',
      idCardFront: '', //身份证正面
      idCardBack: '', //身份证反面
      invoiceCompany: '', //公司名称
      invoiceNumber: '', //开票金额
      taxpayerIdNum: '', //纳税人识别号
      invoiceCategory: '', //开票类目
      receiverInfo: '', //收件人信息
      rate: '', //费率
      commissionTerm: '', //佣金结算周期
      address: '', // 详细地址
      industry: '', //所属行业
      commissionUsage: '', //佣金用途
      openBank: '', //开户银行
      bankAccount: '', //银行账号
      operatorPhone: '' //操作人手机号
    };
  },
  mounted() {
    this.invoiceCompany = this.userInfo.company;
    this.getOSSConfig();
    this.getInvoiceCategoryList();
    this.getIndustryList();
  },
  computed: {
    invoiceCategoryList() {
      if (this.invoiceCategoryObj) {
        return this.invoiceType === '普票' ? this.invoiceCategoryObj.generalInvoice : this.invoiceCategoryObj.specialInvoice;
      }
    }
  },
  methods: {
    changeInvoiceType() {
      this.invoiceCategory = '';
    },
    onConfirm(value) {
      this.invoiceCategory = value[1];
      this.showPicker = false;
    },
    onConfirmIndustry({ name }) {
      this.industry = name;
      this.showIndustryPicker = false;
    },
    async getIndustryList() {
      let res = await sysConfig_getSysConfigList({ key: 'industry' });
      if (res.code === 200) {
        this.industryList = res.data;
      } else {
        Toast(res.msg);
      }
    },
    async getInvoiceCategoryList() {
      let res = await invoiceCategory_getInvoiceCategoryList();
      if (res.code === 200) {
        this.invoiceCategoryObj = res.data;
      } else {
        Toast(res.msg);
      }
    },
    async getTaxNo() {
      if (!this.invoiceCompany) {
        Toast('请输入公司全称');
      } else {
        let res = await invoiceTitle_getCompanyList({ keyword: this.invoiceCompany, pageSize: 1, pageNum: 1 });
        if (res.code === 200) {
          this.invoiceCompany = res.data.Result[0].Name;
          this.taxpayerIdNum = res.data.Result[0].CreditCode;
        } else {
          Toast(res.msg);
        }
      }
    },
    afterRead(file, detail, attr) {
      let OSS = require('ali-oss');
      let client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: this.OSSConfig.accessKeyId,
        accessKeySecret: this.OSSConfig.accessKeySecret,
        stsToken: this.OSSConfig.securityToken,
        bucket: this.OSSConfig.bucket
      });
      this.$loading.show();
      client
        .put(`inputInvoice/userid_${this.userInfo.id}/${Date.now()}.png`, file.file)
        .then(res => {
          this.$loading.hide();
          this[attr] = res.url;
        })
        .catch(err => {});
    },
    async submit() {
      const { invoiceType, invoiceCompany, taxpayerIdNum, invoiceNumber, invoiceCategory, receiverInfo, address, idCardFront, idCardBack, industry, commissionUsage, openBank, bankAccount, rate, operatorPhone, commissionTerm } = this;
      if (!invoiceCategory) {
        return Toast('请选择开票类目');
      } else if (!invoiceCompany) {
        return Toast('请填写公司全称');
      } else if (!taxpayerIdNum) {
        return Toast('请填写纳税人识别号');
      } else if (!invoiceNumber) {
        return Toast('请填写开票金额');
      } else if (!receiverInfo) {
        return Toast('请填写收件人信息');
      } else if (!address) {
        return Toast('请填写收货地址');
      } else if (!rate) {
        return Toast('请填写费率');
      }
      if (invoiceType === '普票') {
        if (!idCardFront) {
          return Toast('请上传身份证正面');
        } else if (!idCardBack) {
          return Toast('请上传身份证反面');
        }
      } else {
        if (!industry) {
          return Toast('请选择所属行业');
        } else if (!commissionUsage) {
          return Toast('请输入佣金用途');
        } else if (!commissionTerm) {
          return Toast('请输入佣金发放周期');
        } else if (!openBank) {
          return Toast('请输入开户银行');
        } else if (!bankAccount) {
          return Toast('请输入银行卡号');
        } else if (!/^1[3456789]\d{9}$/.test(operatorPhone)) {
          return Toast('请输入正确的操作人手机号');
        }
      }
      let detailList = [
        { itemKey: 'invoiceType', itemValue: invoiceType, itemName: '发票类型' },
        { itemKey: 'invoiceCompany', itemValue: invoiceCompany, itemName: '公司全称' },
        { itemKey: 'taxpayerIdNum', itemValue: taxpayerIdNum, itemName: '纳税人识别号' },
        { itemKey: 'invoiceNumber', itemValue: invoiceNumber, itemName: '开票金额' },
        { itemKey: 'invoiceCategory', itemValue: invoiceCategory, itemName: '开票类目' },
        { itemKey: 'receiverInfo', itemValue: receiverInfo, itemName: '收件人信息' },
        { itemKey: 'address', itemValue: address, itemName: '收货地址' },
        { itemKey: 'rate', itemValue: rate, itemName: '费率' }
      ];
      if (invoiceType === '普票') {
        detailList = detailList.concat([
          { itemKey: 'idCardFront', itemValue: idCardFront, itemName: '身份证正面' },
          { itemKey: 'idCardBack', itemValue: idCardBack, itemName: '身份证反面' }
        ]);
      } else {
        detailList = detailList.concat([
          { itemKey: 'industry', itemValue: industry, itemName: '所属行业' },
          { itemKey: 'commissionUsage', itemValue: commissionUsage, itemName: '佣金用途' },
          { itemKey: 'commissionTerm', itemValue: commissionTerm, itemName: '佣金发放周期' },
          { itemKey: 'openBank', itemValue: openBank, itemName: '开户银行' },
          { itemKey: 'bankAccount', itemValue: bankAccount, itemName: '银行卡号' },
          { itemKey: 'operatorPhone', itemValue: operatorPhone, itemName: '操作人手机号' }
        ]);
      }
      let { phone, nickname, company } = this.userInfo;
      let res = await order_saveOrder({
        json: 1,
        productId: this.$route.query.id,
        phone,
        nickname,
        company,
        detailList
      });
      if (res.code === 200) {
        Toast('提交成功，稍后我们的专属顾问会及时与您联系');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inputinvoice-detail {
  overflow: hidden;
}
.upload {
  padding: 20px 0;
  display: flex;
  line-height: 48px;
  .desc {
    width: 160px;
    color: #323233;
    font-size: 28px;
    margin-right: 20px;
  }
  img {
    width: 408px;
    height: 246px;
    object-fit: cover;
  }
}
.inputinvoice-detail {
  padding: 0 32px;
  background: #fff;
}
.van-cell {
  align-items: center;
  padding: 20px 0;
  &:not(:last-child)::after {
    left: 0;
  }
}
.tips {
  position: relative;
  margin: 32px 0;
  line-height: 36px;
  font-size: 24px;
  color: #999;
  padding-left: 20px;
  &:before {
    content: '*';
    color: red;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.submit-btn {
  margin: 70px 0 50px;
  font-weight: bold;
  font-size: 30px;
  border-radius: 6px;
}
</style>
